<template>
    <div class="container">
        <HeaderTop title="测评结果">
            <a href="javascript:" slot="left" class="go_back" @click="$router.goBack()">
              <i class="iconfont iconxiazai6"></i>返回
            </a>
          </HeaderTop>

        <BarChart :list="type0" chartId="chart1" title='人格特质'></BarChart>
        <div class="desc">
            <table>
                <tr v-for="(row, index) in indicatorChunks" :key="index">
                    <td v-for="(item, i) in row" :key="i">{{ item.name2 }} - {{ item.name }}</td>
                </tr>
            </table>
        </div>


        <BarChart :list="type1" chartId="chart1" title='需求动机'></BarChart>
        <div class="desc">
            <table>
                <tr v-for="(row, index) in indicatorChunks2" :key="index">
                    <td v-for="(item, i) in row" :key="i">{{ item.name2 }}- {{ item.name }}</td>
                </tr>
            </table>
        </div>


        <RadarChart :list="type2"></RadarChart>
    </div>
</template>

<script>
import BarChart from './components/bar-chart.vue';
import RadarChart from './components/radar-chart.vue';
import { summary } from '../../api'
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
export default {
    name: "Home",
    components: {
        BarChart,
        RadarChart,
        HeaderTop,
    },
    data() {
        return {
            sno: this.$store.state.userInfo.sno,
            type0: [
                {
                    "value": "J",
                    "total": 1
                },
                {
                    "value": "I",
                    "total": 1
                }
            ],
            type1: [],
            type2: [],
            indicator: [
                { name: "投注性", name2: "A" },
                { name: "領導性", name2: "B" },
                { name: "冒險性", name2: "C" },
                { name: "迅速性", name2: "D" },
                { name: "活動性", name2: "E" },
                { name: "社交性", name2: "F" },
                { name: "思考性", name2: "G" },
                { name: "細緻性", name2: "H" },
                { name: "條理性", name2: "I" },
                { name: "穩定性", name2: "J" },
            ],
            indicator2: [
                { name: "意志力", name2: "a" },
                { name: "成就需求", name2: "b" },
                { name: "統御需求", name2: "c" },
                { name: "表現慾", name2: "d" },
                { name: "合群性", name2: "e" },
                { name: "親和需求", name2: "f" },
                { name: "喜新性", name2: "g" },
                { name: "批判性", name2: "h" },
                { name: "崇拜性", name2: "i" },
                { name: "受役性", name2: "j" }
            ]
        }
    },
    created() {
        this.getType0()
        this.getType1()
        this.getType2()
    },
    computed: {
        indicatorChunks() {
            const chunkSize = 5;
            return this.chunkArray(this.indicator, chunkSize);
        },
        indicatorChunks2() {
            const chunkSize = 5;
            return this.chunkArray(this.indicator2, chunkSize);
        }
    },
    methods: {
        async getType0() {
            let data = {
                "sno": this.sno,
                "type": 0
            }
            let result = await summary(data)
            if (result.statu == 0) {
                this.type0 = result.data
                console.log('getType0', result.data)
            }
        },
        async getType1() {
            let data = {
                "sno": this.sno,
                "type": 1
            }
            let result = await summary(data)
            if (result.statu == 0) {
                this.type1 = result.data
                console.log('getType1', result.data)
            }
        },
        async getType2() {
            let data = {
                "sno": this.sno,
                "type": 2
            }
            let result = await summary(data)
            if (result.statu == 0) {
                this.type2 = result.data
                console.log('getType2', result.data)
            }
        },
        chunkArray(array, size) {
            return array.reduce((acc, _, index) => index % size ? acc : [...acc, array.slice(index, index + size)], []);
        }
    },
}

</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
@import "../../common/stylus/mixins.styl"
.container{
    padding: 30px 0 50px 0
}
table {
    border-collapse: collapse;
  }
  
  td {
    border: 1px dashed #eee;
    padding: 8px;
    font-size:12px
    font-family: '微软雅黑', sans-serif;
  }
  .desc {
    margin:0 auto;
    padding-bottom:20px
  }
</style>